<template>
    <view class="bg-content">
        <div v-if="globalVariable.token">

            <index ref="indexRef" v-if="show.indexRef" :style="{display: selectedComponentRef === 'indexRef' ? '' : 'none'}"></index>

            <indexEatery ref="indexEateryRef" v-if="show.indexEateryRef"
                         :style="{display: selectedComponentRef === 'indexEateryRef' ? '' : 'none'}"></indexEatery>

            <goodsClass ref="goodsClassRef" :tabsSelf="this" v-if="show.goodsClassRef"
                        :style="{display: selectedComponentRef === 'goodsClassRef' ? '' : 'none'}"></goodsClass>

            <goodsSeckill ref="goodsSeckillRef" v-if="show.goodsSeckillRef && selectedComponentRef === 'goodsSeckillRef'"></goodsSeckill>

            <shoppingCart ref="shoppingCartRef" v-if="show.shoppingCartRef && selectedComponentRef === 'shoppingCartRef'"></shoppingCart>

            <communityDynamic ref="communityDynamicRef" v-if="show.communityDynamicRef && selectedComponentRef === 'communityDynamicRef'"></communityDynamic>

            <person ref="personRef" v-if="show.personRef" :style="{display: selectedComponentRef === 'personRef' ? '' : 'none'}"></person>

            <u-tabbar v-model="selectedIndex" :list="tarbar" @change="onChangeTabbarTab($event)"></u-tabbar>

        </div>
    </view>
</template>

<script>

    import index from './index/index'
    import indexEatery from './index-eatery/index'
    import goodsClass from './goods-class/index'
    import goodsSeckill from './goods-seckill/index'
    import shoppingCart from './shopping-cart/index'
    import communityDynamic from './community-dynamic/index'
    import person from './person/index'
    import {TabbarUtil} from "@/dev/core/utils/tabbar.util";

    export default {
        data() {
            return {
                selectedIndex: 0,
                selectedComponentRef: '',
                tarbar: [],
                show: {
                    indexRef: false,
                    indexEateryRef: false,
                    goodsClassRef: false,
                    goodsSeckillRef: false,
                    shoppingCartRef: false,
                    communityDynamicRef: false,
                    personRef: false,
                }

            }
        },
        onReady() {
            const _self = this;
            this.tarbar = TabbarUtil.getTabbar();
            this.tarbar.forEach((item, index) => {
                _self.show[item.componentRef] = true;
            });
            this.selectedComponentRef = this.tarbar[this.selectedIndex].componentRef;
            // 设置首页标题
            uni.setNavigationBarTitle({
                title: this.tarbar[this.selectedIndex].title
            });
            this.$forceUpdate();
        },
        onShow() {
            if (this.$refs[this.selectedComponentRef] && this.$refs[this.selectedComponentRef]._onShow) {
                this.$refs[this.selectedComponentRef] && this.$refs[this.selectedComponentRef]._onShow()
            }
        },
        components: {
            index,
            indexEatery,
            goodsClass,
            goodsSeckill,
            shoppingCart,
            communityDynamic,
            person
        },
        // 上拉加载
        onReachBottom: function () {
            console.log("tab下拉力加载更多---------------------", this.selectedComponentRef);
            if (this.$refs[this.selectedComponentRef] && this.$refs[this.selectedComponentRef].pagination && this.$refs[this.selectedComponentRef].pagination.hasNextPage) {
                if (this.$refs[this.selectedComponentRef].doInfinite) {
                    this.$refs[this.selectedComponentRef].doInfinite();
                }
            }
            if (this.$refs[this.selectedComponentRef].loadMore) {
                this.$refs[this.selectedComponentRef].loadMore();
            }
        },
        methods: {
            onChangeTabbarTab(index) {
                console.log("选中的底部导航菜单index-------------------------", index, this.tarbar[index]);
                this.selectedIndex = index;
                this.selectedComponentRef = this.tarbar[index].componentRef;
                // 设置首页标题
                uni.setNavigationBarTitle({
                    title: this.tarbar[index].title
                });
                this.$forceUpdate();
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
